<template>
  <div class="hearder-outer">
    <div class="hearder-w">
      <router-link to="/home" class="logo" active-class="active_link">
        <img class="logo-img" src="https://rs.dance365.com/logo@3xrenew3.png" />
      </router-link>
      <ul class="hearder-nav">
        <li class="nav-item1 nav-item">
          <RouterLink to="/home" active-class="active_link">资源</RouterLink>
        </li>
        <li class="nav-item">
          <RouterLink to="/source" active-class="active_link">课程</RouterLink>
        </li>
        <li class="nav-item">
          <RouterLink to="/practice" active-class="active_link">练习室</RouterLink>
        </li>
        <li class="nav-item">
          <RouterLink to="/commucation" active-class="active_link">交流</RouterLink>
        </li>
        <li class="nav-item">
          <RouterLink to="/mine" active-class="active_link">我的</RouterLink>
        </li>
      </ul>
      <div class="hearder-right">
        <div class="hearder-download iconfont icon-phone">下载APP</div>
        <el-dropdown class="hearder-dropdown">
          <el-button class="hearder-publish iconfont icon-jiahao">
            + 发布
          </el-button>

          <template #dropdown>
            <el-dropdown-menu popper-class="dropdown-item">
              <el-dropdown-item class="dropdown-item-i dropdown-item-h"
              >发布资源</el-dropdown-item
              >
              <el-dropdown-item class="dropdown-item-i" divided
              >作品</el-dropdown-item
              >
              <el-dropdown-item class="dropdown-item-i" divided
              >教程</el-dropdown-item
              >
              <el-dropdown-item class="dropdown-item-i" divided
              >动态</el-dropdown-item
              >
              <el-dropdown-item class="dropdown-item-i dropdown-item-h" divided
              >发布商品</el-dropdown-item
              >
              <el-dropdown-item class="dropdown-item-i" divided
              >视频课</el-dropdown-item
              >
              <el-dropdown-item class="dropdown-item-i" divided
              >线下课</el-dropdown-item
              >
              <el-dropdown-item class="dropdown-item-i" divided
              >直播课</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <div class="login">
          <a
              style="margin-right: 10px"
              @click="handleLogin"
              v-show="!userInfo.account"
          >登录</a
          >
          <span style="margin-right: 10px">{{ userInfo.account }}</span>
          <a v-show="userInfo.avatar" @click="handleLogout">退出</a>
          <!--登录弹窗-->
          <span
              text
              @click="dialogTableVisible = true"
              v-show="!userInfo.account"
          >
            扫码登录
          </span>
        </div>
        <div class="hearder-avatar">
          <el-avatar
              :size="30"
              :src="userInfo.avatar ? userInfo.avatar : circleUrl"
          />
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogTableVisible" title="扫码登录" width="500px">
      <img
          src="@/assets/images/weixin.jpg"
          alt="二维码"
          style="height: 400px; width: 300px"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts">
export default {
  name: "Hearder",
};
</script>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRouter, RouterLink } from "vue-router";
import { ElMessage } from "element-plus";
import { useUserInfoStore } from "@/stores/user/user";
import { storeToRefs } from "pinia";
// import { reqUserInfo } from "@/apis/mine/user";
const dialogTableVisible = ref(false); // 登录框关闭状态
const userInfoStore = useUserInfoStore();
const { userInfo } = storeToRefs(userInfoStore);

// 头像图片地址
const circleUrl =
    "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";

// 登录
const router = useRouter();
const handleLogin = async () => {
  try {
    await userInfoStore.login();
    ElMessage.success("登录成功！");
  } catch (e: any) {
    ElMessage.error(e.message);
  }
};

// 退出
const handleLogout = async () => {
  router.replace("/home");
  localStorage.removeItem("userInfo");
  ElMessage.success("退出成功");
  userInfo.value.account = "";
  userInfo.value.avatar = "";
};
</script>

<style scoped lang="scss">
.active_link{
  color: #f93684;
}
a {
  text-decoration: none;
  color: #111;
}
.hearder-outer {
  background-color: #fff;
  height: 60px;
  box-sizing: border-box;
  box-shadow: 4px 0 9px #c1c1c1;
  .hearder-w {
    height: 60px;
    width: 1200px;
    margin: auto;
    .logo {
      height: 60px;
      float: left;
      box-sizing: border-box;
      // padding-top: 15px;
      line-height: 60px;
      margin-right: 25px;
      font-size: 0;
      .logo-img {
        width: 128px;
        height: 30px;
      }
    }
    .hearder-nav {
      list-style: none;
      display: flex;
      float: left;
      font-size: 18px;
      margin: 8px 0;
      box-sizing: border-box;
      .nav-item {
        :hover {
          color: #f93684;
        }
      }
      .nav-item1 {
        padding: 12px 10px;
        ~ .nav-item {
          margin-left: 35px;
          padding: 12px 10px;
        }
      }
    }
    .hearder-right {
      display: flex;
      float: right;
      box-sizing: border-box;
      .hearder-download {
        font-size: 16px;
        margin: 21px 30px 22px 0;
      }
      :deep(.hearder-dropdown) {
        .hearder-publish {
          width: 75px;
          height: 30px;
          box-sizing: border-box;
          background-color: #f93684;
          color: white;
          border-radius: 20px;
          float: right;
          text-align: center;
          line-height: 30px;
          margin: 15px 0;
          margin-right: 28px;
          margin-top: 15px;
        }
        .dropdown-item {
          width: 300px;
          &:hover .dropdown-item-i {
            background-color: #c1c1c1;
          }
        }
      }
      .login {
        text-align: center;
        line-height: 59px;
        padding: 0px 10px;
        cursor: pointer;
      }
      .hearder-avatar {
        float: right;
        box-sizing: border-box;
        margin-top: 14px;
      }
    }
    .active {
      color: #f93684;
    }
    a {
      text-decoration: none;
    }
  }
}
</style>
